<template>
  <div class="compass">
    <!-- 页面主体 -->
    <v-main>
      <!-- 店铺数据总览 -->
      <div class="mall-summary">
        <!-- 总览标题栏 -->
        <div class="summary-title clearfix">
          <div class="name">实时罗盘</div>
          <div class="date">{{ nowTime }}</div>
        </div>
        <!-- 总览内容 -->
        <div class="summary-main clearfix">
          <!-- 总览 - 店内人数 -->
          <div class="summary-wrapper">
            <div class="summary-item">
              <div class="label">
                <span>总店内人数(人)</span>
                <el-tooltip class="item" effect="dark" placement="bottom-start">
                  <i class="iconfont">&#xe72d;</i>
                  <div slot="content">
                    当日摄像头在店内捕捉到的人数进行汇总, 多个摄像头在当日捕捉到同一人只会计算1次;
                  </div>
                </el-tooltip>
              </div>
              <div class="value">
                <i-count-up :startVal="0"
                          :endVal="todayMallCustomerStats ? todayMallCustomerStats.customer_num : 0"
                          :decimals="0"
                          :duration="2"
                          :options="cuConfig">
                </i-count-up>
              </div>
              <div :class="[ 'mom', computedMom.cn > 0 ? 'rise' : computedMom.cn < 0 ? 'fall' : '' ]" v-if="computedMom.cn !== -9999">
                <span>日: {{ computedMom.cn === null || computedMom.cn === undefined ? '-' : computedMom.cn > 0 ? '+' + computedMom.cn : computedMom.cn }}%</span>
                <i class="iconfont" v-show="computedMom.cn > 0">&#xe6ca;</i>
                <i class="iconfont" v-show="computedMom.cn < 0">&#xe6cb;</i>
              </div>
              <div class="mom" v-else>
                昨日无数据，无法环比
              </div>
            </div>
          </div>
          <!-- 总览 - 进店人次 -->
          <div class="summary-wrapper">
            <div class="summary-item">
              <div class="label">
                <span>总进店人次(人次)</span>
                <el-tooltip class="item" effect="dark" placement="bottom-start">
                  <i class="iconfont">&#xe72d;</i>
                  <div slot="content">
                    当日摄像头捕捉顾客进店次数, 同一个顾客多次进店会统计多次;
                  </div>
                </el-tooltip>
              </div>
              <div class="value">
                <i-count-up :startVal="0"
                          :endVal="todayMallCustomerStats ? todayMallCustomerStats.customer_times : 0"
                          :decimals="0"
                          :duration="2"
                          :options="cuConfig">
                </i-count-up>
              </div>
              <div :class="[ 'mom', computedMom.ct > 0 ? 'rise' : computedMom.ct < 0 ? 'fall' : '' ]" v-if="computedMom.ct !== -9999">
                <span>日: {{ computedMom.ct === null || computedMom.ct === undefined ? '-' : computedMom.ct > 0 ? '+' + computedMom.ct : computedMom.ct }}%</span>
                <i class="iconfont" v-show="computedMom.ct > 0">&#xe6ca;</i>
                <i class="iconfont" v-show="computedMom.ct < 0">&#xe6cb;</i>
              </div>
              <div class="mom" v-else>
                昨日无数据，无法环比
              </div>
            </div>
          </div>
          <!-- 总览 - 累计新增顾客 -->
          <div class="summary-wrapper">
            <div class="summary-item">
              <div class="label">
                <span>累计新增顾客(人)</span>
                <el-tooltip class="item" effect="dark" placement="bottom-start">
                  <i class="iconfont">&#xe72d;</i>
                  <div slot="content">
                    首次来店顾客;
                  </div>
                </el-tooltip>
              </div>
              <div class="value">
                <i-count-up :startVal="0"
                          :endVal="todayMallCustomerStats ? todayMallCustomerStats.new_customer_num : 0"
                          :decimals="0"
                          :duration="2"
                          :options="cuConfig">
                </i-count-up>
              </div>
              <div :class="[ 'mom', computedMom.ncn > 0 ? 'rise' : computedMom.ncn < 0 ? 'fall' : '' ]" v-if="computedMom.ncn !== -9999">
                <span>日: {{ computedMom.ncn === null || computedMom.ncn === undefined ? '-' : computedMom.ncn > 0 ? '+' + computedMom.ncn : computedMom.ncn }}%</span>
                <i class="iconfont" v-show="computedMom.ncn > 0">&#xe6ca;</i>
                <i class="iconfont" v-show="computedMom.ncn < 0">&#xe6cb;</i>
              </div>
              <div class="mom" v-else>
                昨日无数据，无法环比
              </div>
            </div>
          </div>
          <!-- 总览 - 店内人数 -->
          <div class="summary-wrapper">
            <div class="summary-item">
              <div class="label">
                <span>当前店内人数(人)</span>
                <el-tooltip class="item" effect="dark" placement="bottom-start">
                  <i class="iconfont">&#xe72d;</i>
                  <div slot="content">
                    店内所有摄像头对当前1分钟内捕捉到的顾客进行汇总, 多个摄像头捕捉到统一顾客会进行去重, 只计算1人;
                  </div>
                </el-tooltip>
              </div>
              <div class="value">
                <i-count-up :startVal="0"
                          :endVal="currCustomerTotal || 0"
                          :decimals="0"
                          :duration="2"
                          :options="cuConfig">
                </i-count-up>
              </div>
              <div class="desc">
                昨日最高<span class="num rise">{{ yesterdayMallCustomerStats ? yesterdayMallCustomerStats.customer_num_peak : '0' }}</span>人
              </div>
            </div>
          </div>
          <!-- 总览 - 最热区域 -->
          <div class="summary-wrapper">
            <div class="summary-item">
              <div class="label">
                <span>最热区域</span>
                <el-tooltip class="item" effect="dark" placement="bottom-start">
                  <i class="iconfont">&#xe72d;</i>
                  <div slot="content">
                    店内所有摄像头对当前1分钟内各区域人数进行统计, 显示人数最多的区域为最热区域;
                  </div>
                </el-tooltip>
              </div>
              <div class="value" :style="{ 'font-size': currHeatZoneInfo ? currHeatZoneInfo.name.length >= 6 ? '18px' : '' : '' }">{{ currHeatZoneInfo ? currHeatZoneInfo.name : '暂无'}}</div>
              <div class="desc">
                <span>当前<span class="num rise">{{ currHeatZoneTotal || 0 }}</span>人</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 店铺图标 tabs -->
      <div class="compass-tabs">
        <el-tabs v-model="activeTabsName" @tab-click="handleSwitchTab">
          <!-- tab - 新增顾客 -->
          <el-tab-pane label="新增顾客" name="newCustomerNumberView">
            <div class="customer-number-view data-view">
              <div class="panel-title">
                <span>趋势图</span>
              </div>
              <div class="panel-charts">
                <customer-number-echart :options="newCustomerNumberEchartOption"></customer-number-echart>
              </div>
              <div class="panel-title">
                <span>详细数据</span>
                <el-tooltip class="instructions" effect="dark" placement="bottom-start">
                  <i class="iconfont">&#xe72d;</i>
                  <div slot="content">
                    新增顾客: 首次来店顾客;
                    <br>
                    <br>
                    店内人数: 摄像头捕捉每个时段的店内人数, 多个摄像头在每个时段多次捕捉到同一人只会计算1次;
                    <br>
                    <br>
                    进店人次: 摄像头捕捉每个时段的进店人次;
                    <br>
                    <br>
                    经过人数: 店外摄像头捕捉到的人数，多次拍摄同一人会进行排重处理;
                    <br>
                    <br>
                    进店转化率: 进店转化率=店内人数 / 经过人数 * 100%;
                  </div>
                </el-tooltip>
              </div>
              <div class="panel-table">
                <el-table :data="currTableData"
                          border
                          size="small"
                          highlight-current-row
                          show-summary
                          :summary-method="tableSummaryMethod"
                          style="width: 100%">
                  <el-table-column prop="time"
                                   label="时间"
                                   align="center"
                                   sortable
                                   width="180">
                  </el-table-column>
                  <el-table-column prop="newCustomerNumber"
                                   align="center"
                                   sortable
                                   label="新增顾客">
                    <template slot-scope="scope">{{ scope.row.newCustomerNumber !== null && scope.row.newCustomerNumber !== undefined ? scope.row.newCustomerNumber : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="customerNumber"
                                   align="center"
                                   sortable
                                   label="店内人数">
                    <template slot-scope="scope">{{ scope.row.customerNumber !== null && scope.row.customerNumber !== undefined ? scope.row.customerNumber : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="customerTimes"
                                   align="center"
                                   sortable
                                   label="进店人次">
                    <template slot-scope="scope">{{ scope.row.customerTimes !== null && scope.row.customerTimes !== undefined ? scope.row.customerTimes : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="passengerNumber"
                                   align="center"
                                   sortable
                                   label="经过人数">
                    <template slot-scope="scope">{{ scope.row.passengerNumber !== null && scope.row.passengerNumber !== undefined ? scope.row.passengerNumber : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="customerPercentConv"
                                   align="center"
                                   sortable
                                   :sort-method="sortPercentConvMethods"
                                   label="进店转化率">
                    <template slot-scope="scope">{{ scope.row.customerPercentConv !== null && scope.row.customerPercentConv !== undefined ? scope.row.customerPercentConv : '0%'}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <!-- tab - 店内人数 -->
          <el-tab-pane label="店内人数" name="customerNumberView">
            <div class="customer-number-view data-view">
              <div class="panel-title">
                <span>趋势图</span>
              </div>
              <div class="panel-charts">
                <customer-number-echart :options="customerNumberEchartOption"></customer-number-echart>
              </div>
              <div class="panel-title">
                <span>详细数据</span>
                <el-tooltip class="instructions" effect="dark" placement="bottom-start">
                  <i class="iconfont">&#xe72d;</i>
                  <div slot="content">
                    新增顾客: 首次来店顾客;
                    <br>
                    <br>
                    店内人数: 摄像头捕捉每个时段的店内人数, 多个摄像头在每个时段多次捕捉到同一人只会计算1次;
                    <br>
                    <br>
                    进店人次: 摄像头捕捉每个时段的进店人次;
                    <br>
                    <br>
                    经过人数: 店外摄像头捕捉到的人数，多次拍摄同一人会进行排重处理;
                    <br>
                    <br>
                    进店转化率: 进店转化率=店内人数 / 经过人数 * 100%;
                  </div>
                </el-tooltip>
              </div>
              <div class="panel-table">
                <el-table :data="currTableData"
                          border
                          size="small"
                          highlight-current-row
                          show-summary
                          :summary-method="tableSummaryMethod"
                          style="width: 100%">
                  <el-table-column prop="time"
                                   label="时间"
                                   align="center"
                                   sortable
                                   width="180">
                  </el-table-column>
                  <el-table-column prop="newCustomerNumber"
                                   align="center"
                                   sortable
                                   label="新增顾客">
                    <template slot-scope="scope">{{ scope.row.newCustomerNumber !== null && scope.row.newCustomerNumber !== undefined ? scope.row.newCustomerNumber : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="customerNumber"
                                   align="center"
                                   sortable
                                   label="店内人数">
                    <template slot-scope="scope">{{ scope.row.customerNumber !== null && scope.row.customerNumber !== undefined ? scope.row.customerNumber : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="customerTimes"
                                   align="center"
                                   sortable
                                   label="进店人次">
                    <template slot-scope="scope">{{ scope.row.customerTimes !== null && scope.row.customerTimes !== undefined ? scope.row.customerTimes : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="passengerNumber"
                                   align="center"
                                   sortable
                                   label="经过人数">
                    <template slot-scope="scope">{{ scope.row.passengerNumber !== null && scope.row.passengerNumber !== undefined ? scope.row.passengerNumber : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="customerPercentConv"
                                   align="center"
                                   sortable
                                   :sort-method="sortPercentConvMethods"
                                   label="进店转化率">
                    <template slot-scope="scope">{{ scope.row.customerPercentConv !== null && scope.row.customerPercentConv !== undefined ? scope.row.customerPercentConv : '0%'}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <!-- tab - 进店人次 -->
          <el-tab-pane label="进店人次" name="customerTimesView">
            <div class="customer-times-view data-view">
              <div class="panel-title">
                <span>趋势图</span>
              </div>
              <div class="panel-charts">
                <customer-times-echart :options="customerTimesEchartOption"></customer-times-echart>
              </div>
              <div class="panel-title">
                <span>详细数据</span>
                <el-tooltip class="instructions" effect="dark" placement="bottom-start">
                  <i class="iconfont">&#xe72d;</i>
                  <div slot="content">
                    新增顾客: 首次来店顾客;
                    <br>
                    <br>
                    店内人数: 摄像头捕捉每个时段的店内人数, 多个摄像头在每个时段多次捕捉到同一人只会计算1次;
                    <br>
                    <br>
                    进店人次: 摄像头捕捉每个时段的进店人次;
                    <br>
                    <br>
                    经过人数: 店外摄像头捕捉到的人数，多次拍摄同一人会进行排重处理;
                    <br>
                    <br>
                    进店转化率: 进店转化率=店内人数 / 经过人数 * 100%;
                  </div>
                </el-tooltip>
              </div>
              <div class="panel-table">
                <el-table :data="currTableData"
                          border
                          size="small"
                          highlight-current-row
                          show-summary
                          :summary-method="tableSummaryMethod"
                          style="width: 100%">
                  <el-table-column prop="time"
                                   label="时间"
                                   align="center"
                                   sortable
                                   width="180">
                  </el-table-column>
                  <el-table-column prop="newCustomerNumber"
                                   align="center"
                                   sortable
                                   label="新增顾客">
                    <template slot-scope="scope">{{ scope.row.newCustomerNumber !== null && scope.row.newCustomerNumber !== undefined ? scope.row.newCustomerNumber : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="customerNumber"
                                   align="center"
                                   sortable
                                   label="店内人数">
                    <template slot-scope="scope">{{ scope.row.customerNumber !== null && scope.row.customerNumber !== undefined ? scope.row.customerNumber : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="customerTimes"
                                   align="center"
                                   sortable
                                   label="进店人次">
                    <template slot-scope="scope">{{ scope.row.customerTimes !== null && scope.row.customerTimes !== undefined ? scope.row.customerTimes : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="passengerNumber"
                                   align="center"
                                   sortable
                                   label="经过人数">
                    <template slot-scope="scope">{{ scope.row.passengerNumber !== null && scope.row.passengerNumber !== undefined ? scope.row.passengerNumber : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="customerPercentConv"
                                   align="center"
                                   sortable
                                   :sort-method="sortPercentConvMethods"
                                   label="进店转化率">
                    <template slot-scope="scope">{{ scope.row.customerPercentConv !== null && scope.row.customerPercentConv !== undefined ? scope.row.customerPercentConv : '0%'}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <!-- tab - 进店分析 -->
          <el-tab-pane label="进店分析" name="customerAnalyzeView">
            <div class="customer-analyze-view data-view">
              <div class="panel-title">
                <span>趋势图</span>
              </div>
              <div class="panel-charts">
                <customer-analyze-echart :options="customerAnalyzeEchartOption"></customer-analyze-echart>
              </div>
              <div class="panel-title">
                <span>详细数据</span>
                <el-tooltip class="instructions" effect="dark" placement="bottom-start">
                  <i class="iconfont">&#xe72d;</i>
                  <div slot="content">
                    新增顾客: 首次来店顾客;
                    <br>
                    <br>
                    店内人数: 摄像头捕捉每个时段的店内人数, 多个摄像头在每个时段多次捕捉到同一人只会计算1次;
                    <br>
                    <br>
                    进店人次: 摄像头捕捉每个时段的进店人次;
                    <br>
                    <br>
                    经过人数: 店外摄像头捕捉到的人数，多次拍摄同一人会进行排重处理;
                    <br>
                    <br>
                    进店转化率: 进店转化率=店内人数 / 经过人数 * 100%;
                  </div>
                </el-tooltip>
              </div>
              <div class="panel-table">
                <el-table :data="currTableData"
                          border
                          size="small"
                          highlight-current-row
                          show-summary
                          :summary-method="tableSummaryMethod"
                          style="width: 100%">
                  <el-table-column prop="time"
                                   label="时间"
                                   align="center"
                                   sortable
                                   width="180">
                  </el-table-column>
                  <el-table-column prop="newCustomerNumber"
                                   align="center"
                                   sortable
                                   label="新增顾客">
                    <template slot-scope="scope">{{ scope.row.newCustomerNumber !== null && scope.row.newCustomerNumber !== undefined ? scope.row.newCustomerNumber : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="customerNumber"
                                   align="center"
                                   sortable
                                   label="店内人数">
                    <template slot-scope="scope">{{ scope.row.customerNumber !== null && scope.row.customerNumber !== undefined ? scope.row.customerNumber : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="customerTimes"
                                   align="center"
                                   sortable
                                   label="进店人次">
                    <template slot-scope="scope">{{ scope.row.customerTimes !== null && scope.row.customerTimes !== undefined ? scope.row.customerTimes : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="passengerNumber"
                                   align="center"
                                   sortable
                                   label="经过人数">
                    <template slot-scope="scope">{{ scope.row.passengerNumber !== null && scope.row.passengerNumber !== undefined ? scope.row.passengerNumber : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="customerPercentConv"
                                   align="center"
                                   sortable
                                   :sort-method="sortPercentConvMethods"
                                   label="进店转化率">
                    <template slot-scope="scope">{{ scope.row.customerPercentConv !== null && scope.row.customerPercentConv !== undefined ? scope.row.customerPercentConv : '0%' }}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <!-- tab - 区域统计 -->
          <el-tab-pane label="区域统计" name="areaAnalyzeView">
            <div class="area-analyze-view data-view">
              <div class="panel-title">
                <span>趋势图</span>
                <el-tooltip class="instructions" effect="dark" placement="bottom-start">
                  <i class="iconfont">&#xe72d;</i>
                  <div slot="content">
                    区域客流统计: 分时段分区域进行客流统计, 同一人在不同时段相同区域系统不做排重处理;
                    <br>
                    <br>
                    区域总客流与人均时长统计: 统计各区域总人数与在此区域停留的人均时长;
                  </div>
                </el-tooltip>
              </div>
              <div class="panel-charts">
                <area-customer-flow-echart :options="areaCustomerFlowEchartOption"></area-customer-flow-echart>
              </div>
              <div class="panel-charts">
                <customer-area-data-echart :options="customerAreaDataEchartOption"></customer-area-data-echart>
              </div>
            </div>
          </el-tab-pane>
          <!-- tab - 热力监控 -->
          <el-tab-pane label="热力监控" name="mallMonitoring">
            <div class="data-view">
              <div class="panel-title">
                <span>店面热力图</span>
                <el-tooltip class="instructions" effect="dark" placement="bottom-start">
                  <i class="iconfont">&#xe72d;</i>
                  <div slot="content">
                    通过统计各区域内的人数情况以热力图的形式展现, 并可回顾历史店内人数的热力概况;
                  </div>
                </el-tooltip>
              </div>
              <div class="panel-heatmap">
                <v-mall-map :ad="mallMapData"
                            :scale="mallMapScale"
                            :data="heatMapAreaConfig"
                            :status="heatMapPlayerStatus"
                            :isInit="isInit"
                            type="heatmap">
                </v-mall-map>
                <el-row class="player">
                  <el-col :xs="{ span: 4 }" :sm="{ span: 2 }" class="player-btn">
                    <button class="btn-item" v-show="!heatMapPlayerStatus" @click="heatMapPlay">
                      <i class="iconfont">&#xe61c;</i>
                    </button>
                    <button class="btn-item" v-show="heatMapPlayerStatus" @click="heatMapPlay">
                      <i class="iconfont">&#xe616;</i>
                    </button>
                  </el-col>
                  <el-col :xs="{ span: 19, offset: 1 }" :sm="{ span: 22 }" class="time-bar">
                    <div class="running-bar"
                         ref="domRunningBar"
                         @click="dragHeatMapProgress"
                         :style="{ width: (canRuningPlayBarPercent * 100) + '%' }">
                    </div>
                    <div class="bar-arrow"
                         :style="{ left: (playPointPos * 100) + '%' }">
                    </div>
                    <div class="bar-num"
                         :style="{ left: (playPointPos * 100) + '%' }">
                      {{ currHeatMapPlayTimeStr.hh + ':' + currHeatMapPlayTimeStr.mm }}
                    </div>
                    <div class="bar-timetable">
                      <!-- 时刻表-列表渲染 -->
                      <span v-for="(moment, index) in mallBusinessHoursArr"
                            :key="index"
                            :style="{ left: ((Math.floor((100 / (mallBusinessHoursArr.length - 1)) * 100) / 100) * index) + '%' }"
                            class="timetable-item">
                          {{ moment }}
                      </span>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="panel-title">
                <span>视频监控</span>
              </div>
              <div class="panel-monitoring">
                <h5 class="video-title">{{ currPlayMediaSource['remark'] }}</h5>
                <video id="gmallMonitoring" class="video-item" playsInline webkit-playsinline>
                  <source :src="currPlayMediaSource['live_play_url'] || 'rtmp://'"/>
                </video>
                <div class="monitoring-list">
                  <div
                    class="monitoring-wrapper-scroll clearfix">
                    <div class="monitoring-item"
                      v-for="(item, inx) in monitoringPlayList"
                      :key="inx"
                      @click="switchMonitoringSource(inx)">
                      <img :src="item.live_cover_url" class="cover-image" />
                      <div class="cover-title">{{ item.remark }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </v-main>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// components
import MainComp from '@/components/main'
import MallMapComp from '@/components/mallMap'
import EchartComp from '@/components/echarts'
// 图标的配置文件
import customerNumberEchartInitOption from './customerNumberEchartInitOption.js'
import newCustomerNumberEchartInitOption from './newCustomerNumberEchartInitOption.js'
import customerTimesEchartInitOption from './customerTimesEchartInitOption.js'
import customerAnalyzeEchartInitOption from './customerAnalyzeEchartInitOption.js'
import areaCustomerFlowEchartInitOption from './areaCustomerFlowEchartInitOption.js'
import customerAreaDataEchartInitOption from './customerAreaDataEchartInitOption.js'
// element-ui
import { Row, Col, DatePicker, Tooltip, Tabs, TabPane, Table, TableColumn } from 'element-ui'
/**
 * Vue.js(v2.x+) component wrap for countUp.js(v1.x+)
 * @Documents https://github.com/xlsdg/vue-countup-v2
 */
import ICountUp from 'vue-countup-v2'
/**
 * Parse, validate, manipulate, and display dates in javascript
 * @Documents http://momentjs.com/
 */
import Moment from 'moment'

import * as APICompass from '@/api/compass.js'
import * as Common from '@/internal/common.js'
import Config from '@/utils/config.js'
// import launchFullscreen from '@/internal/videoLaunchFullscreen.js'
import EZUIPlayer from '@/utils/u.js'

// 热力图播放数据
const heatMapPlaySpeed = 800

export default {
  name: 'compass',

  components: {
    // elementUI component
    elRow: Row,
    elCol: Col,
    elDatePicker: DatePicker,
    elTooltip: Tooltip,
    elTabs: Tabs,
    elTabPane: TabPane,
    elTable: Table,
    elTableColumn: TableColumn,
    // countUP component
    ICountUp: ICountUp,
    // 项目自定义组件
    vMain: MainComp,
    vMallMap: MallMapComp,
    customerNumberEchart: EchartComp,
    customerTimesEchart: EchartComp,
    customerAnalyzeEchart: EchartComp,
    areaCustomerFlowEchart: EchartComp,
    customerAreaDataEchart: EchartComp
  },

  created () {
    // 更新当前时间
    let startTime = Moment(`${this.mallStartTime}:00:00`, 'hh:mm:ss')
    let endTime = this.mallEndTime === 24 ? Moment(`00:00:01`, 'hh:mm:ss').add(1, 'day') : Moment(`${this.mallEndTime}:00:01`, 'hh:mm:ss')
    this.timerGetCurrTime = setInterval(() => {
      this.nowTime = Moment().format('YYYY-MM-DD HH:mm:ss')
      const seconds = Moment().format('s')
      // 每分钟更新次热力图
      if (!parseInt(seconds) && Moment().isBetween(startTime, endTime)) {
        this.APIGetHeatMapData()
      }
    }, 1000)
    // 监听socket频道
    this.echoClient.private(`${Config.CURR_PRE_CLIENT}shops.${this.mallId}`)
      .listen(Config.ECHO_EVENT_RTIME, (res) => {
        const apiUrl = res ? res.api_uri : null
        const apiParamDate = res ? res.date : null
        switch (apiUrl) {
          case 'hourly-stats':
            this.getCustomerNumberChartsData(apiParamDate)
            break
          case 'hourly-zone-stats':
            this.APIGetHourlyAreaCustomerData(apiParamDate)
            break
          case 'daily-zone-stats':
            this.getCustomerStatsNearlyTwoDays(apiParamDate)
            break
          case 'daily-stats':
            this.getCustomerStatsNearlyTwoDays(apiParamDate)
            break
          case 'hottest-zone':
            this.$store.dispatch('commitCurrHeatZoneData', res.extras.hottest_zone)
            break
          case 'online-count':
            this.$store.dispatch('commitCurrCustomerTotal', res.extras.online_count)
            break
        }
      })
    // init request
    this.getCustomerNumberChartsData()
    this.APIGetRealTimeCustomerData()
    this.getCustomerStatsNearlyTwoDays()
    this.APIGetHourlyAreaCustomerData()
    this.APIGetAreaFlowData()
    this.APIGetShopMonitoringList()
    this.APIGetMinutelyCustomerData()
    if (Moment().isBetween(startTime, endTime)) {
      this.APIGetHeatMapData().then(() => {
        this.heatMapPlay()
      })
    }
    // 前端准点刷新相关数据
    const nextTime = (Moment().add(1, 'hours').minutes(0).seconds(0).unix() - Moment().unix()) * 1000
    this.timerGetHourlyData = setTimeout(() => {
      this.getCustomerNumberChartsData()
      this.timerGetHourlyData = setInterval(() => {
        this.getCustomerNumberChartsData()
      }, 1000 * 60 * 60)
    }, nextTime)
    // 视频播放器
    this.$nextTick(() => {
      this.__gmallMonitoringPlayer = new EZUIPlayer('gmallMonitoring')
    })
  },

  beforeDestroy () {
    clearInterval(this.timerGetCurrTime)
    clearInterval(this.heatMapPlayTimer)
    clearInterval(this.timerGetHourlyData)
    this.echoClient.leave(`${Config.CURR_PRE_CLIENT}shops.${this.mallId}`)
  },

  watch: {
    // 切换视频摄像头
    currPlayMediaSource (val) {
      this.__gmallMonitoringPlayer.changeSource(val['live_play_url'])
      this.__gmallMonitoringPlayer.play()
    }
  },

  data () {
    return {
      // countUp config ============
      cuConfig: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.'
      },
      // default tab name ==========
      activeTabsName: 'newCustomerNumberView',
      // 今日客流数据
      todayCustomerData: null,
      // echart图标 option
      customerNumberEchartOption: null,
      newCustomerNumberEchartOption: null,
      customerTimesEchartOption: null,
      customerAnalyzeEchartOption: null,
      areaCustomerFlowEchartOption: null,
      customerAreaDataEchartOption: null,
      // 区域地图信息 ======================================
      // mallMapData: Config.MALL_MAP_INFO.data,
      // mallMapScale: Config.MALL_MAP_INFO.scale,
      // 热力图 ======================================
      heatMapPlayerStatus: false,
      currHeatMapPlayTimestamp: Moment(),
      lastReqHeatMapDataTime: null, // 最后一次请求热区图的时间
      heatMapAreaConfig: null,
      // 当前时间相关 ======================================
      nowTime: Moment().format('YYYY-MM-DD HH:mm:ss'),
      timerGetCurrTime: null,
      // 监控播放 ===============================
      isPlaying: false,
      isInit: false,
      currPlayMediaIndex: 0
    }
  },

  computed: {
    ...mapGetters([
      'filterMallNotifications',
      'currCustomerTotal',
      'mallId',
      'echoClient',
      'currHeatZoneID',
      'currHeatZoneTotal',
      'currHeatZoneInfo',
      'mallStartTime',
      'mallEndTime',
      'mallMapData',
      'mallMapScale',
      'todayMallCustomerStats',
      'yesterdayMallCustomerStats',
      'areaCustomerLineData',
      'areaFlowBarData',
      'heatMapData',
      'monitoringPlayList',
      'token',
      'userinfo',
      'yesterdayMinutelyCustomerData'
    ]),
    currTableData () {
      const data = []
      const todayCustomerData = this.todayCustomerData || []
      for (let inx = 0; inx < todayCustomerData.length; inx++) {
        const stats = todayCustomerData[inx]
        let item = {}
        item.time = stats.stats_hour < 10 ? `0${stats.stats_hour}:00` : `${stats.stats_hour}:00`
        item.customerNumber = stats ? stats.customer_num : null
        item.newCustomerNumber = stats ? stats.new_customer_num : null
        item.passengerNumber = stats ? stats.customer_num_all : null
        item.customerTimes = stats ? stats.customer_times : null
        item.customerPercentConv = stats ? stats.customer_convert_ratio : null
        data.push(item)
      }
      return data
    },
    computedMom () {
      if (this.todayMallCustomerStats) {
        const yesterdayMCd = this.yesterdayMinutelyCustomerData || {}
        let ymcdKeys = Object.keys(yesterdayMCd).map(item => Number.parseInt(item))
        const yesterdayMoment = Moment().subtract(1, 'days').unix()
        const data = yesterdayMCd[yesterdayMoment] || yesterdayMCd[Common.binarySearch(ymcdKeys, yesterdayMoment)]
        if (data) {
          const todayCn = this.todayMallCustomerStats.customer_num
          const todayCt = this.todayMallCustomerStats.customer_times
          const todayNcn = this.todayMallCustomerStats.new_customer_num
          const yesterdayCn = data.total_customer_num
          const yesterdayCt = data.total_customer_times
          const yesterdayNcn = data.total_new_customer_num
          let cnMom
          let ctMom
          let ncnMom
          if (yesterdayCn === 0) {
            cnMom = -9999
          } else {
            cnMom = Math.round((todayCn - yesterdayCn) / yesterdayCn * 10000) / 100
          }
          if (yesterdayCt === 0) {
            ctMom = -9999
          } else {
            ctMom = Math.round((todayCt - yesterdayCt) / yesterdayCt * 10000) / 100
          }
          if (yesterdayNcn === 0) {
            ncnMom = -9999
          } else {
            ncnMom = Math.round((todayNcn - yesterdayNcn) / yesterdayNcn * 10000) / 100
          }
          return {
            ct: ctMom,
            cn: cnMom,
            ncn: ncnMom
          }
        } else {
          return {
            ct: -9999,
            cn: -9999,
            ncn: -9999
          }
        }
      } else {
        return {
          ct: null,
          cn: null,
          ncn: null
        }
      }
    },
    mallBusinessHoursArr () {
      let hours = []
      for (let time = this.mallStartTime; time <= this.mallEndTime; time++) {
        let timeStr = time.toString()
        timeStr = timeStr.length === 1 ? `0${timeStr}:00` : `${timeStr}:00`
        hours.push(timeStr)
      }
      return hours
    },
    /**
     * 热力图播放相关的computed ===============================================
     */
    // 热力图播放的总时长
    currHeatMapTotalTime () {
      return (this.mallEndTime - this.mallStartTime) * 60 * 60 * 1000
    },
    // 热力图可以播放部分所占的百分比
    canRuningPlayBarPercent () {
      const tsp = (Moment(this.nowTime).unix() - Moment(this.mallStartTime, 'hh').unix()) * 1000 / this.currHeatMapTotalTime
      return tsp.toFixed(4)
    },
    // 计算当前播放点的位置
    playPointPos () {
      const tsp = (this.currHeatMapPlayTimestamp - (Moment(this.mallStartTime, 'hh').unix() * 1000)) / this.currHeatMapTotalTime
      return tsp.toFixed(4)
    },
    currHeatMapPlayTimeStr () {
      return {
        hh: Moment(this.currHeatMapPlayTimestamp).hours(),
        mm: Moment(this.currHeatMapPlayTimestamp).format('mm'),
        ss: Moment(this.currHeatMapPlayTimestamp).seconds()
      }
    },
    currPlayMediaSource () {
      if (this.monitoringPlayList && this.monitoringPlayList.length) {
        return this.monitoringPlayList[this.currPlayMediaIndex]
      }
      return {}
    }
  },

  filters: {
  },

  methods: {
    // 获取客户人数图表相关数据
    getCustomerNumberChartsData (date) {
      const today = Moment(date).format('YYYY-MM-DD')
      const yesterday = Moment(today).subtract(1, 'days').format('YYYY-MM-DD')
      const aweekago = Moment(today).subtract(7, 'days').format('YYYY-MM-DD')
      const fourweeksago = Moment(today).subtract(28, 'days').format('YYYY-MM-DD')
      Promise.all([
        this.APIGetHourlyCustomerData(today),
        this.APIGetHourlyCustomerData(yesterday),
        this.APIGetHourlyCustomerData(aweekago),
        this.APIGetHourlyCustomerData(fourweeksago)
      ]).then((values) => {
        this.todayCustomerData = values[0].data.stats
        this.setCustomerNumberChartsOption(values)
        this.setNewCustomerNumberChartsOption(values)
        this.setCustomerTimesChartsOption(values)
        this.setCustomerAnalyzeChartsOption(values)
        this.setCustomerAreaDataChartsOption(values)
      })
    },
    // 获取今天, 昨天的店铺顾客信息统计
    getCustomerStatsNearlyTwoDays (date) {
      const today = Moment(date).format('YYYY-MM-DD')
      const yesterday = Moment(today).subtract(1, 'days').format('YYYY-MM-DD')
      Promise.all([
        this.APIGetCustomerFlowData(today),
        this.APIGetCustomerFlowData(yesterday)
      ]).then((values) => {
        this.$store.dispatch('commitTodayCustomerStats', values[0].data.stats)
        this.$store.dispatch('commitYesterdayCustomerStats', values[1].data.stats)
      })
    },
    // 设置客户人数的图标option
    setCustomerNumberChartsOption (values) {
      // customerNumberEchartOption
      const currTime = parseInt(Moment().format('HH'))
      let option = Object.assign({}, customerNumberEchartInitOption)
      option.xAxis = Object.assign({}, option.xAxis, { data: this.mallBusinessHoursArr.slice(0, this.mallBusinessHoursArr.length - 1) })
      option.series.map((item, index) => {
        const stats = values[index].data.stats || []
        let data = index ? new Array(this.mallEndTime - this.mallStartTime).fill(0) : new Array(currTime - this.mallStartTime).fill(0)
        for (let inx = 0; inx < stats.length; inx++) {
          const value = stats[inx]
          data[value.stats_hour - this.mallStartTime] = value.customer_num
        }
        item.data = data
        return item
      })
      this.customerNumberEchartOption = option
    },
    // 设置新增顾客人数的图标option
    setNewCustomerNumberChartsOption (values) {
      // newCustomerNumberEchartOption
      const currTime = parseInt(Moment().format('HH'))
      let option = Object.assign({}, newCustomerNumberEchartInitOption)
      option.xAxis = Object.assign({}, option.xAxis, { data: this.mallBusinessHoursArr.slice(0, this.mallBusinessHoursArr.length - 1) })
      option.series.map((item, index) => {
        const stats = values[index].data.stats || []
        let data = index ? new Array(this.mallEndTime - this.mallStartTime).fill(0) : new Array(currTime - this.mallStartTime).fill(0)
        for (let inx = 0; inx < stats.length; inx++) {
          const value = stats[inx]
          data[value.stats_hour - this.mallStartTime] = value.new_customer_num
        }
        item.data = data
        return item
      })
      this.newCustomerNumberEchartOption = option
    },
    // 设置客户人次的图标option
    setCustomerTimesChartsOption (values) {
      // customerTimesEchartOption
      const currTime = parseInt(Moment().format('HH'))
      let option = Object.assign({}, customerTimesEchartInitOption)
      option.xAxis = Object.assign({}, option.xAxis, { data: this.mallBusinessHoursArr.slice(0, this.mallBusinessHoursArr.length - 1) })
      option.series.map((item, index) => {
        const stats = values[index].data.stats || []
        let data = index ? new Array(this.mallEndTime - this.mallStartTime).fill(0) : new Array(currTime - this.mallStartTime).fill(0)
        for (let inx = 0; inx < stats.length; inx++) {
          const value = stats[inx]
          data[value.stats_hour - this.mallStartTime] = value.customer_times
        }
        item.data = data
        return item
      })
      this.customerTimesEchartOption = option
    },
    // 设置进店分析图表option
    setCustomerAnalyzeChartsOption (values) {
      // customerAnalyzeEchartOption
      const currTime = parseInt(Moment().format('HH'))
      let option = Object.assign({}, customerAnalyzeEchartInitOption)
      option.xAxis[0] = Object.assign({}, option.xAxis[0], { data: this.mallBusinessHoursArr.slice(0, this.mallBusinessHoursArr.length - 1) })
      option.series.map((item, index) => {
        const stats = values[0].data.stats || []
        let data = new Array(currTime - this.mallStartTime + 1).fill(0)
        for (let inx = 0; inx < stats.length; inx++) {
          const value = stats[inx]
          data[value.stats_hour - this.mallStartTime] = index ? Number.parseFloat(value.customer_convert_ratio) : value.customer_num_all
        }
        item.data = data
        return item
      })
      this.customerAnalyzeEchartOption = option
    },
    // 设置区域客流统计
    setAreaCustomerFlowChartOption () {
      // areaCustomerFlowEchartOption
      const values = this.areaCustomerLineData
      let legendData = []
      let series = []
      const currTime = parseInt(Moment().format('HH'))
      for (let inx = 0; inx < this.mallMapData.length; inx++) {
        const mallItem = this.mallMapData[inx]
        const { id } = mallItem
        const data = values ? values[id] : null
        let seriesItemData = new Array(currTime - this.mallStartTime + 1).fill(0)
        if (data) {
          for (let inx = 0; inx < data.length; inx++) {
            const value = data[inx]
            seriesItemData[value.stats_hour - this.mallStartTime] = value.customer_num
          }
        }
        let seriesItem = Object.assign({}, { type: 'line', name: mallItem['name'], data: seriesItemData })
        series.push(seriesItem)
        legendData.push(mallItem['name'])
      }
      let option = Object.assign({}, areaCustomerFlowEchartInitOption)
      option.legend = Object.assign({}, option.legend, { data: legendData })
      option.series = series
      option.xAxis = Object.assign({}, option.xAxis, { data: this.mallBusinessHoursArr.slice(0, this.mallBusinessHoursArr.length - 1) })
      this.areaCustomerFlowEchartOption = option
    },
    // 设置区域总客流与人均时长统计option
    setCustomerAreaDataChartsOption () {
      // customerAreaDataEchartOption
      const areaFlowBarData = this.areaFlowBarData || []
      let xAxisData = []
      let customerTotalData = []
      let customerStayDurationData = []
      for (let inx = 0; inx < this.mallMapData.length; inx++) {
        const mallItem = this.mallMapData[inx]
        const { id } = mallItem
        const item = areaFlowBarData[id]
        xAxisData.push(mallItem['name'])
        customerTotalData.push(item ? item.customer_num : 0)
        customerStayDurationData.push(item ? Math.floor(item.seconds / item.customer_num) : 0)
      }
      let option = Object.assign({}, customerAreaDataEchartInitOption)
      option.xAxis[0] = Object.assign({}, option.xAxis[0], { data: xAxisData })
      option.series[0] = Object.assign({}, option.series[0], { data: customerTotalData })
      option.series[1] = Object.assign({}, option.series[1], { data: customerStayDurationData })

      this.customerAreaDataEchartOption = customerAreaDataEchartInitOption
    },
    // 表格合计计算方法
    tableSummaryMethod ({columns, data}) {
      const sumTxt = '合计'
      let newCustomerNumberTotal = 0
      let customerNumberTotal = 0
      let customerTimesTotal = 0
      let passengerNumberTotal = 0
      for (let inx = 0; inx < data.length; inx++) {
        if (!data) {
          break
        }
        const item = data[inx]
        newCustomerNumberTotal += item.newCustomerNumber
        customerNumberTotal += item.customerNumber
        customerTimesTotal += item.customerTimes
        passengerNumberTotal += item.passengerNumber
      }
      let res = []
      res.push(sumTxt)
      res.push(newCustomerNumberTotal)
      res.push(customerNumberTotal)
      res.push(customerTimesTotal)
      res.push(passengerNumberTotal)
      res.push(passengerNumberTotal ? (Math.round(customerNumberTotal / passengerNumberTotal * 10000) / 100).toFixed(2) + '%' : '0.00%')
      return res
    },
    // 热力图播放部分代码
    heatMapPlay () {
      this.heatMapPlayerStatus = !this.heatMapPlayerStatus
      /**
       * [if description] 判断是否播放热力图
       * @param  {[Boolean]} this.heatMapPlayerStatus [description] 播放状态 true: 播放
       */
      if (this.heatMapPlayerStatus) {
        this.getCurrPlayHeatMapData(this.currHeatMapPlayTimestamp)
        this.heatMapPlayTimer = setInterval(() => {
          let timestamp = this.currHeatMapPlayTimestamp
          timestamp += 1000 * 60
          /**
           * [if description]
           * @param  {Number} timestamp [description] 当前播放的时间显示
           * @param  {Number} this.currTimestamp [description] 当前本地时间显示
           * @return {[type]}           [description] 比较播放时间是否超过本地时间
           */
          if (timestamp > Moment(this.nowTime).unix() * 1000) {
            this.currHeatMapPlayTimestamp = Moment(this.nowTime).unix() * 1000
          } else {
            this.currHeatMapPlayTimestamp = timestamp
          }
          this.getCurrPlayHeatMapData(this.currHeatMapPlayTimestamp)
        }, heatMapPlaySpeed)
      } else {
        clearInterval(this.heatMapPlayTimer)
      }
    },
    getCurrPlayHeatMapData (timestamp) {
      timestamp = Math.floor(timestamp / 1000)
      timestamp = timestamp - (timestamp % 60)
      this.heatMapAreaConfig = this.getHeatMapShapeConfig(timestamp)
    },
    getHeatMapShapeConfig (timestamp) {
      timestamp -= 60
      const data = this.heatMapData[timestamp]
      if (!data || !data.length) {
        return {}
      }
      let maxValArr = 0
      let maxValAeraIdArr = []
      let otherAreaValArr = []
      for (let i = data.length - 1; i >= 0; i--) {
        let currAreaVal = data[i]['customer_num']
        // let currAreaId = data[i]['zone_id']

        if (currAreaVal > maxValArr) {
          maxValArr = currAreaVal
          otherAreaValArr = [...otherAreaValArr, ...maxValAeraIdArr]
          maxValAeraIdArr = [data[i]]
        } else if (currAreaVal === maxValArr) {
          maxValAeraIdArr.push(data[i])
        } else if (currAreaVal !== 0) {
          otherAreaValArr.push(data[i])
        }
      }
      let heatMapAreaConfig = {}
      for (let i = maxValAeraIdArr.length - 1; i >= 0; i--) {
        heatMapAreaConfig[maxValAeraIdArr[i]['zone_id']] = Object.assign({}, maxValAeraIdArr[i], { color: 'rgba(143, 14, 0, .7)' })
      }
      for (let i = otherAreaValArr.length - 1; i >= 0; i--) {
        heatMapAreaConfig[otherAreaValArr[i]['zone_id']] = Object.assign({}, otherAreaValArr[i], { color: 'rgba(143, 119, 0, .5)' })
      }

      return heatMapAreaConfig
    },
    // 拖拽当前播放位置
    dragHeatMapProgress (e) {
      let point = e.offsetX / this.$refs.domRunningBar.offsetWidth
      const ts = Math.floor((Moment(this.nowTime).unix() * 1000 - (Moment(this.mallStartTime, 'hh').unix() * 1000)) * point) + (Moment(this.mallStartTime, 'hh').unix() * 1000)
      this.currHeatMapPlayTimestamp = ts
    },
    // 视频播放相关方法
    switchMonitoringSource (index = 0) {
      if (index !== this.currPlayMediaIndex) {
        this.currPlayMediaIndex = index
      }
    },
    handleSwitchTab ({ name }) {
      switch (name) {
        case 'mallMonitoring':
          this.$nextTick(() => {
            this.isInit = true
          })
          break
        default:
          this.isInit = false
          break
      }
    },
    sortPercentConvMethods (a, b) {
      const prev = Number.parseFloat(a.customerPercentConv)
      const curr = Number.parseFloat(b.customerPercentConv)
      if (prev < curr) {
        return -1
      } else if (prev > curr) {
        return 1
      } else {
        return 0
      }
    },
    // api ======================================================
    /**
     * api: 请求每小时客群数据
     * @param{String}date    日期
     * @param{String}datedecs    当前日期的描述
     */
    /**
     * api: 获取实时的客流数据
     */
    APIGetRealTimeCustomerData () {
      APICompass.APIGetRealTimeCustomerData({ shop: this.mallId })
        .then((res) => {
          this.$store.dispatch('commitCurrHeatZoneData', res.data.hottest_zone)
          this.$store.dispatch('commitCurrCustomerTotal', res.data.online_count)
        })
    },
    APIGetHourlyCustomerData (date) {
      return APICompass.APIGetHourlyCustomerData({ shop: this.mallId, date })
    },
    APIGetCustomerFlowData (date) {
      return APICompass.APIGetCustomerFlowData({ shop: this.mallId, date })
    },
    APIGetHourlyAreaCustomerData (date) {
      APICompass.APIGetHourlyAreaCustomerData({ shop: this.mallId, date })
        .then((res) => {
          // ('commitAreaCustomerData', res.data.stats)
          this.$store.commit('SET_AREACUSTOMER_DATA', res.data.stats)
        })
        .then(() => {
          this.setAreaCustomerFlowChartOption()
        })
    },
    APIGetAreaFlowData (date) {
      APICompass.APIGetAreaFlowData({ shop: this.mallId, date })
        .then((res) => {
          this.$store.commit('SET_AREAFLOW_DATA', res.data.stats || null)
        })
        .then(() => {
          this.setCustomerAreaDataChartsOption()
        })
    },
    APIGetHeatMapData (start, end) {
      let startT = start ? Moment(start) : this.lastReqHeatMapDataTime || Moment(`${this.mallStartTime}:00:00`, 'hh:mm:ss')
      let endT = end ? Moment(end) : Moment(this.nowTime).unix() * 1000
      startT = Moment(startT).second(0)
      endT = Moment(endT).second(0)
      return APICompass.APIGetHeatMapData({
        shop: this.mallId,
        start: encodeURIComponent(startT),
        end: encodeURIComponent(endT)
      }).then((res) => {
        this.lastReqHeatMapDataTime = Moment(this.nowTime).unix() * 1000
        this.$store.commit('SET_HEATMAP_DATA', res.data)
        return res
      })
    },
    APIGetShopMonitoringList () {
      APICompass.APIGetShopMonitoringList({ shop: this.mallId })
        .then((res) => {
          this.$store.commit('SET_MALLMONITORING_LIST', res.data.cameras || [])
        })
    },
    APIGetMinutelyCustomerData () {
      const yesterday = Moment().subtract(1, 'days').format('YYYY-MM-DD')
      APICompass.APIGetMinutelyCustomerData({ shop: this.mallId, date: yesterday })
        .then((res) => {
          this.$store.commit('SET_YESTERDAY_MINUTELY_CUSTOMER_DATA', res.data.stats)
        })
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less">
  // scoped
  .compass {
    .mall-summary {
      width: 100%;
      height: auto;
      box-sizing: border-box;
      background-color: #FFF;
      padding: 10px 20px;
      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .2);
      .summary-title {
        padding: 10px 0;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #DFDFDF;
        overflow: hidden;
        .name {
          float: left;
          font-weight: bold;
          font-size: 18px;
        }
        .date {
          float: left;
          margin-left: 30px;
          color: #777;
          font-size: 14px;
        }
      }
      .summary-main {
        margin-top: 10px;
        padding: 10px;
        .summary-wrapper {
          float: left;
          margin-left: 2%;
          width: 18.4%;
          &:first-child {
            margin-left: 0;
          }
          .summary-item {
            box-sizing: border-box;
            padding: 20px;
            width: 100%;
            background-color: #FFF;
            border: 1px solid #DFDFDF;
            .label {
              color: #777;
              font-size: 14px;
              .iconfont {
                margin-left: 5px;
              }
            }
            .value {
              padding: 5px 0;
              margin-top: 10px;
              font-size: 32px;
              line-height: 32px;
            }
            .desc {
              font-size: 14px;
              margin-top: 10px;
              .num {
                &.rise {
                  color: #E64340;
                }
                &.fall {
                  color: #45C01A;
                }
              }
            }
            .mom {
              font-size: 14px;
              margin-top: 10px;
              &.rise {
                color: #E64340;
              }
              &.fall {
                color: #45C01A;
              }
            }
          }
        }
      }
    }
    .compass-tabs {
      box-sizing: border-box;
      margin-top: 20px;
      padding: 10px 20px;
      width: 100;
      background-color: #FFF;
      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .2);
      .data-view {
        .panel-title {
          font-size: 16px;
          .instructions {
            color: #777;
          }
          .save-csv-link {
            cursor: pointer;
            margin-left: 20px;
            text-decoration: underline;
            font-size: 13px;
            color: #0269c8;
          }
        }
        .panel-charts {
          padding: 20px 0;
          width: 100%;
          height: 350px;
        }
        .panel-table {
          padding: 20px 0;
          width: 100%;
        }
        .panel-heatmap {
          padding: 20px 0;
          width: 100%;
          height: 550px;
          .player {
            box-sizing: border-box;
            padding: 20px 20px 20px 10px;
            width: 100%;
            height: 70px;
            background-color: #040926;
            user-select: none;
            .player-btn {
              .btn-item {
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                width: 30px;
                height: 30px;
                border-radius: 100%;
                background-color: #FFF;
                outline: none;
              }
            }
            .time-bar {
              position: relative;
              height: 6px;
              transform: translateY(12px);
              background-color: #333;
              color: #888;
              font-size: 12px;
              .running-bar {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                background: linear-gradient(to right,#006eff 0,#004aff 100%);
                &:hover {
                  cursor: pointer;
                }
              }
              .bar-arrow {
                position: absolute;
                top: -15px;
                width: 15px;
                height: 15px;
                transform: translateX(-7px);
                background-image: url('img/compass-down-arrow.svg');
                background-position: center center;
                background-size: contain;
                &:after {
                  content: '';
                  display: block;
                  position: absolute;
                  bottom: -6px;
                  left: 50%;
                  transform: translateX(-50%);
                  width: 0;
                  height: 6px;
                  border-right: 1px solid #040926;
                  overflow: hidden;
                  zoom: 1;
                }
              }
              .bar-num {
                position: absolute;
                top: -28px;
                transform: translateX(-50%);
                text-align: center;
              }
              .bar-timetable {
                position: absolute;
                top: 12px;
                left: 0;
                width: 100%;
                .timetable-item {
                  position: absolute;
                  top: 0;
                  left: 0;
                  transform: translateX(-50%);
                }
              }
            }
          }
        }
        .panel-monitoring {
          position: relative;
          top: 0;
          left: 0;
          margin-top: 20px;
          width: 100%;
          background-color: #040926;
          .video-item {
            object-fit: contain;
            width: 100%;
            height: 550px;
            cursor: pointer;
          }
          .video-title {
            position: absolute;
            top: 15px;
            left: 15px;
            margin: 0;
            font-size: 16px;
            font-weight: normal;
            color: #FFF;
            z-index: 1;
          }
          .fullscreen-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 16px;
            height: 16px;
            color: #FFF;
            cursor: pointer;
            z-index: 1;
          }
          .player-button{
            position: absolute;
            left: 50%;
            top: 35%;
            transform: translateX(-50%);
            color: #FFF;
            cursor: pointer;
            z-index: 1;
            .play{
              font-size: 60px;
            }
            .pause{
              font-size: 60px;
            }
          }
          #gmallMonitoring {
            color: #FFF !important;
            a {
              display: inline-block;
              padding: 231px 0;
              color: #FFF !important;
            }
          }
          .monitoring-list {
            position: relative;
            padding: 20px 0;
            width: 100%;
            background-color: #333;
            color: #FFF;
            overflow: hidden;
            .monitoring-item {
              float: left;
              position: relative;
              margin: 20px 0 0 40px;
              width: 230px;
              height: 128.5px;
              background-color: #FFF;
              cursor: pointer;
              &:hover {
                box-shadow: 0px 0px 17px 0px #040926;
              }
              .cover-image {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
              }
              .cover-title {
                position: absolute;
                top: 10px;
                left: 10px;
                color: #FFF;
                font-size: 14px;
                z-index: 1;
              }
            }
            &:hover {
              .left-arrow, .right-arrow {
                display: block;
              }
            }
            .left-arrow {
              display: none;
              position: absolute;
              top: 50%;
              left: 0;
              width: 24px;
              height: 50px;
              line-height: 50px;
              text-align: center;
              background-color: rgba(255, 255, 255, .5);
              transform: translateY(-50%);
              cursor: pointer;
            }
            .right-arrow {
              display: none;
              position: absolute;
              top: 50%;
              right: 0;
              width: 24px;
              height: 50px;
              line-height: 50px;
              text-align: center;
              background-color: rgba(255, 255, 255, .5);
              transform: translateY(-50%);
              cursor: pointer;
            }
          }
        }
      }
    }
  }
</style>
